<template>
  <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
  <a-button type="primary" @click="exportData" :loading="exportLoading" v-modulePerm="['foShanPool:export']">
    <template #icon>
      <ExportOutlined />
    </template>
    导出
  </a-button>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:localPagination="page"
      @paginationChange="onPageChange"
      v-model:loading="loading"
      :rowKey="(record) => record.supplierCode"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :scroll="{ x: 'max-content'}"
      :row-key="(record) => record.sku"
      @expand="handleExpandedRowsChange"
      :slots="['expandedRowRender']"
  >
    <template #expandedRowRender="{ record }">
      <foShanSku :ref="`expandSku-${record.sku}`" :product-sku="record.sku"/>
    </template>
  </common-table>
</template>
<script>
export default {
  name:'inventoryPools-foShanPool'
}
</script>
<script setup>
import {ref, onMounted, nextTick,getCurrentInstance} from "vue";
import foShanSku from "@/views/inventoryPools/components/foshanSku.vue";
import CommonTable from "@/components/commonTable/index.vue";
import CommonSearch from "@/components/commonSearch/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {getManyDictItems} from "@/api/system/dict.js";
import {getFoShanInventory} from "@/api/inventoryPools/foShan.js";
import {postFile} from "@utils/service/index.js";
import {message} from "ant-design-vue";
import ExpandSku from "@/views/inventoryPools/components/expandSku.vue";
const columns =[
  {

    "dataIndex": "sku",
    "title": "SKU",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "skuType_dictText",
    "title": "类型",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "minCreateTime",
    "title": "最早缺货时间",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "stockoutQty",
    "title": "总缺货数",
    "align": "center",
    "fieldType": "Long"
  },
  {
    title:"美加欧",
    children:[{
        "dataIndex": "fsAvailable",
        "title": "佛山现货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "fsSellable",
        "title": "佛山可发",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "fsPurchase",
        "title": "佛山采购中",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "fsStockout",
        "title": "佛山缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "fsStockoutFlag",
        "title": "佛山需采购",
        "align": "center",
        "fieldType": "Long"
      },
    ]
  },
  {
    title:"B2B(非美加欧)",
    children:[
      {
        "dataIndex": "b2bAvailable",
        "title": "B2B可用",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "b2bPurchase",
        "title": "B2B采购中",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "b2bStockout",
        "title": "B2B缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "b2bStockoutFlag",
        "title": "B2B需采购",
        "align": "center",
        "fieldType": "Long"
      },
    ]
  },
  {
    "title": "缺货明细",
    "align": "center",
    "children":[
      {

        "dataIndex": "qtyUsCa",
        "title": "美国CA缺货",
        "align": "center",
      },
      {
        "dataIndex": "qtyUsTx",
        "groupTitle": "缺货明细",
        "title": "美国TX缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyUsNj",
        "groupTitle": "缺货明细",
        "title": "美国NJ缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyCa",
        "groupTitle": "缺货明细",
        "title": "加拿大缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyEu",
        "groupTitle": "缺货明细",
        "title": "欧盟缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyOther",
        "groupTitle": "缺货明细",
        "title": "其他缺货",
        "align": "center",
        "fieldType": "Long"
      },
    ]
  },
  {
    "dataIndex": "hasOrder_dictText",
    "title": "有订单",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "isStockout_dictText",
    "title": "需采购",
    "align": "center",
    "fieldType": "String"
  }
]
const formItems = ref([
  {
    label:'SKU',
    type:'input',
    field:'sku',
  },
  {
    label:"类型",
    type:'select',
    field: 'skuType',
    options:[]
  },
  {
    label:'最早缺货时间',
    field:'time',
    type: 'rangePicker',
    defaultValue: [],
    showTime:false,
  },
  {
    label:"需采购",
    type:'select',
    field: 'isStockout',
    options:[]
  },
  {
    label:"有订单",
    type:'select',
    field: 'hasOrder',
    options:[]
  },
])
const selectedRowKeys = ref([])
const exportLoading = ref(false)
const {proxy} = getCurrentInstance()
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getFoShanInventory,
  queryFactory: () => ({
    columns:'createTime'
  }),
  beforeSearch: () => {
    //处理日期
    if(query.value.time){
      query.value.minCreateTimeStart = query.value.time[0]
      query.value.minCreateTimeEnd = query.value.time[1]
    }else{
      delete query.value.minCreateTimeStart
      delete query.value.minCreateTimeEnd
    }
  },
});
/**
 * 初始化字典数据
 * @returns {Promise<void>}
 */
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"sku_type,boolean_cn"
    })
    formItems.value[1].options = res.result.sku_type
    formItems.value[3].options = res.result.boolean_cn
    formItems.value[4].options = res.result.boolean_cn
  }catch (e){
    console.log(e)
  }
}

const handleExpandedRowsChange = (flag,record) => {
  if(flag){
    nextTick(()=>{
      proxy.$refs[`expandSku-${record.sku}`].init()
    })
  }
}

/**
 *  选择行变化事件
 * @param e {Array} 选择行的keys
 */
const onSelectChange = (e) => {
  selectedRowKeys.value = e
}
const exportData = async () => {
  try{
    exportLoading.value = true
    const res = await postFile('/foshan/export','post',query.value,'佛山仓库存.xlsx')
  }catch (e){
    message.error(e)
  }finally {
    exportLoading.value = false
  }
}
onMounted(()=>{
  init()
})
</script>
<style scoped>

</style>
